<el-dialog :close-on-click-modal="false"  :close-on-press-escape="false"  class="dialogStyleBase" :title="mixinEdit_editTitle+'运费模板'" width="1000px" :visible.sync="mixinEdit_editVisible"
    :before-close="function(){mixinEdit_editBoxClose('editForm')}" append-to-body>

    <div class="dialogStyleBaseBox"  v-loading="mixinEdit_loading">
        <el-form ref="editForm" :model="form" label-width="130px"
            label-position="left">


            <el-form-item label="模板名称" prop="name" :rules="{ required: true, message: '模板名称 不能为空'}">
                <el-input v-model="form.name" maxlength="60" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="计价方式" prop="calculateType" required>
                <el-radio-group v-model="form.calculateType"  @change="changeValidate">
                    <el-radio label="1" >按件数</el-radio>
                    <el-radio label="2" >按重量</el-radio>
                    <el-radio label="3" >按体积</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否默认" prop="isDefault" required>
                <el-radio-group v-model="form.isDefault" >
                    <el-radio :label="0" >否</el-radio>
                    <el-radio :label="1" >是</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="配送区域及运费" required>
                <div class="templateDetailLst">

                    <div class="head" v-if="form.calculateType=='1'">
                        <div class="sub sub1">可配送区域</div>
                        <div class="sub sub2">首件（个）</div>
                        <div class="sub sub2">运费（元）</div>
                        <div class="sub sub2">续件（个）</div>
                        <div class="sub sub2">续费（元）</div>
                    </div>

                    <div class="head" v-if="form.calculateType=='2'">
                        <div class="sub sub1">可配送区域</div>
                        <div class="sub sub2">首重（kg）</div>
                        <div class="sub sub2">运费（元）</div>
                        <div class="sub sub2">续重（kg）</div>
                        <div class="sub sub2">续费（元）</div>
                    </div>

                    <div class="head" v-if="form.calculateType=='3'">
                        <div class="sub sub1">可配送区域</div>
                        <div class="sub sub2">首体积（m³）</div>
                        <div class="sub sub2">运费（元）</div>
                        <div class="sub sub2">续体积（m³）</div>
                        <div class="sub sub2">续费（元）</div>
                    </div>


                    <div class="item" v-for="(item,index) in form.templateDetailLst">
                        
                        <div class="sub sub1" v-if="index==0">
                            <el-checkbox v-model="item.areaInfo" @change="changeValidate" >所有地区默认配送</el-checkbox>
                            <span class="alt">（未勾选，则仅下列所选区域可配送）</span>
                        </div>

                        <div class="sub sub1" v-if="index!=0">
                            <div class="name n3" v-if="item.areaName==''">请选择可配送区域</div>
                            <div class="name n1" v-else>{{item.areaName}}</div>
                            <div class="buts">
                                <el-button type="text" @click="selectDeliverArea(item,index)">编辑</el-button>
                                <el-button type="text" @click="delDeliverArea(item,index)">删除</el-button>
                            </div>
                        </div>
                       
                        <div class="sub sub2">
                            <el-form-item :prop="'templateDetailLst.'+index+'.baseUnit'" label-width="0px"
                                :rules="[{trigger: ['blur', 'change'] ,validator:function(rule, value, callback){validator1(rule, value, callback,item,index)}}]">
                                <el-input style="width:100%;" v-model="form.templateDetailLst[index].baseUnit"
                                    :disabled="index==0 && !item.areaInfo">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div class="sub sub2">
                            <el-form-item :prop="'templateDetailLst.'+index+'.baseAmount'" label-width="0px"
                                :rules="[{trigger: ['blur', 'change'] ,validator:function(rule, value, callback){validator2(rule, value, callback,item,index)}}]">
                                <el-input style="width:100%;" v-model="form.templateDetailLst[index].baseAmount"
                                    :disabled="index==0 && !item.areaInfo">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div class="sub sub2">
                            <el-form-item :prop="'templateDetailLst.'+index+'.extendUnit'" label-width="0px"
                                :rules="[{trigger: ['blur', 'change'] ,validator:function(rule, value, callback){validator1(rule, value, callback,item,index)}}]">
                                <el-input style="width:100%;" v-model="form.templateDetailLst[index].extendUnit"
                                    :disabled="index==0 && !item.areaInfo">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div class="sub sub2">
                            <el-form-item :prop="'templateDetailLst.'+index+'.extendAmount'" label-width="0px"
                                :rules="[{trigger: ['blur', 'change'] ,validator:function(rule, value, callback){validator2(rule, value, callback,item,index)}}]">
                                <el-input style="width:100%;" v-model="form.templateDetailLst[index].extendAmount"
                                    :disabled="index==0 && !item.areaInfo">
                                </el-input>
                            </el-form-item>
                        </div>
                        
                    </div>
                </div>

                <el-button @click="addTemplate()" icon="el-icon-map-location">点击添加可配送区域和运费</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div slot="footer">
        <el-row>
            <el-col :span="12" style="text-align: left;">
                <el-button :disabled="mixinEdit_loading" @click="mixinEdit_resetForm('editForm')">重 置</el-button>
            </el-col>
            <el-col :span="12">
                <el-button :disabled="mixinEdit_loading" @click="mixinEdit_editBoxClose('editForm')">取 消</el-button>
                <el-button :disabled="mixinEdit_loading" type="primary" @click="mixinEdit_editFormSubmit({model:'form',ref:'editForm'})">确
                    定</el-button>
            </el-col>
        </el-row>
    </div>
</el-dialog>